<template>
    <div id="app">
        <el-container style="height: 100%" direction="vertical">
            <el-header :style="{background:cl002}">
                <yi style="width: 1500px;margin-top:15px" @colorDate="cpnClick"></yi>
            </el-header>
            <el-container>
                <!--二级菜单 -->
                <el-aside width="230px" >
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu default-active="1" background-color="#545c64" text-color="#fff"
                                     active-text-color="#ffd04b" router>
                                <template :index="item.lujing" v-for="item in cai" >
                                    <div @click="er(item.subMenus,item.name)">
                                        <el-menu-item>
                                            <i :class="item.tubiao"></i>
                                            <span slot="title">{{item.name}}</span>
                                        </el-menu-item>
                                    </div>
                                </template>
                            </el-menu>
                        </el-col>
                        <el-col :span="12">
                            <el-menu default-active="2" background-color="#545c64" text-color="#fff"
                                     active-text-color="#ffd04b" router>
                                <el-menu-item-group>
                                    <template slot="title">{{template}}</template>
                                    <el-menu-item :index="item.lujing" v-for="item in ercai">{{item.name}}</el-menu-item>
                                </el-menu-item-group>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-container>
                    <el-scrollbar style="height:900px;">
                        <el-main>
                            <router-view></router-view>
                        </el-main>
                    </el-scrollbar>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import shou from "./shou/Shouye"
    import yi from "./shou/Yi"
    export default {
        data(){
            return{
                cl002:'',
                cai:[
                ],
                ercai:[
                ],
                template:""
            }
        },
        components:{
            yi,
            shou
        },
        methods:{
            //父组件中定义方法来接收子组件传的值
            cpnClick(item){
                this.cl002=item
            },
            //连接后端
            async as(){
                const res = await this.$http.post("/shouye/all");
                this.template=res.data[0].name
                this.ercai=res.data[0].subMenus
                this.cai=res.data
            },
            er(zi,template){
                this.template=template
                this.ercai=zi
                console.log(zi)
            }
        },
        created(){
            this.as();
        }

    }
</script>
<style lang="scss">
    .el-aside::-webkit-scrollbar {
        display: none;
    }
    #app{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .el-header, .el-footer {
        background-color: #31C3A6;
    }
    .el-aside {
        background-color: #545C64;
        color: #333;
        line-height: 100%;
    }

</style>